<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import { dailyDeliveryDataQuery } from '@/api/material-distribution';

  const dailyData = ref<any[]>([
    {
      value: 0,
      label: '今日配送任务',
    },
    {
      value: 0,
      label: '待配送任务',
    },
    {
      value: 0,
      label: '已配送待接收',
    },
    {
      value: 0,
      label: '配送已接收',
    },
  ]);
  async function getDailyDeliveryData() {
    const response = await dailyDeliveryDataQuery();
    if (response.retCode === '200') {
      dailyData.value[3].value = response.responseBody.finishedCount;
      dailyData.value[0].value = response.responseBody.toDayTaskCount;
      dailyData.value[2].value = response.responseBody.TBReceiveCount;
      dailyData.value[1].value = response.responseBody.waitCount;
    }
  }
  onMounted(() => {
    getDailyDeliveryData();
  });
</script>

<template>
  <a-space class="showDataType">
    <a-descriptions size="medium" :data="dailyData" bordered :column="4" />
  </a-space>
</template>

<style scoped>
  .showDataType {
    display: flex;
    flex-wrap: nowrap;
  }
</style>
